<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我的家乡</title>
  <link rel="stylesheet" href="./style.css" />
  <style>
    #input {
      display: flex;
      align-items: center;
    }

    #input>input {
      outline: none;
      border: 1px solid #2196f3;
      height: 25px;
      margin-top: 5px;

    }

    #input>button {
      width: 60px;
      height: 25px;
      background-color: #2196f3;
      color: white;
      border: none;
      margin-top: 3px;
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <div class="container cl">
      <div class="logo fl">
        <a href="../index.html">我的家乡-武汉</a>
      </div>
      <div class="nav fr">
        <ul>
          <li><a href="../index.html">首页</a></li>
          <li><a href="sub1.html">美食之都</a></li>
          <li><a href="sub2.html" class="on">人文景观</a></li>
          <li><a href="sub3.html">精彩活动</a></li>
          <li><a href="sub4.html">照片集锦</a></li>
          <!-- 未登录状态下的导航项 -->
          <li><a href="sub5.html" id="unauthenticated-nav1">登录</a></li>
          <li><a href="sub6.html" id="unauthenticated-nav2">注册</a></li>
          <!-- 登录状态下的导航项 -->
          <li><a href="sub7.html" id="authenticated-nav" style="display: none;">设置</a></li>
          <li id="input">
            <input type="text" id="search-input">
            <button id="search-button">搜索</button>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container">
    <!-- 景点介绍 -->
    <div class="landscapes" id="landscapes">
      <div class="common-tit"><span></span> 景点介绍 <span></span></div>
      <div class="list" id="landscape-list">
      </div>
    </div>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <p>四季武汉，樱花荷塘枫叶雪‌</p>
  </div>

  <script src="./js/login.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 数据加载与渲染
      let listData = JSON.parse(localStorage.getItem('sub2Data')) || []; // 如果没有数据，则使用空数组

      const landscapeList = document.getElementById('landscape-list');

      listData.forEach(landscape => {
        const itemDiv = document.createElement('div');
        itemDiv.classList.add('item', 'cl');

        const imgDiv = document.createElement('div');
        imgDiv.classList.add('img');
        const imgElement = document.createElement('img');
        imgElement.src = landscape.img;
        imgElement.alt = landscape.title;
        imgDiv.appendChild(imgElement);

        const txtDiv = document.createElement('div');
        txtDiv.classList.add('txt');

        const titleDiv = document.createElement('div');
        titleDiv.classList.add('tit');
        titleDiv.textContent = landscape.title;
        txtDiv.appendChild(titleDiv);

        const descDiv = document.createElement('div');
        descDiv.classList.add('desc');
        descDiv.setAttribute('title', landscape.desc);
        descDiv.textContent = landscape.desc;
        txtDiv.appendChild(descDiv);

        itemDiv.appendChild(imgDiv);
        itemDiv.appendChild(txtDiv);
        landscapeList.appendChild(itemDiv);
      });

      // 搜索功能
      const searchInput = document.getElementById('search-input');
      const landscapeItems = document.querySelectorAll('.item.cl'); // 使用更具体的类选择器

      function performSearch() {
        const filter = searchInput.value.toLowerCase();

        landscapeItems.forEach(item => {
          let titleElement = item.querySelector('.tit');
          let descElement = item.querySelector('.desc');
          let txtValue = (titleElement ? titleElement.textContent : '') + (descElement ? descElement.textContent : '');

          if (txtValue.toLowerCase().indexOf(filter) > -1) {
            item.style.display = ''; // 显示匹配的景点项
          } else {
            item.style.display = 'none'; // 隐藏不匹配的景点项
          }
        });
      }

      // 监听输入框的 keyup 事件，允许实时搜索
      searchInput.addEventListener('keyup', performSearch);
    });
  </script>
  <script>
    if (!localStorage.getItem('sub2Data')) {
      let sub2Data = [
        {
          img: "./images/index-jd-1.jpg",
          title: "你的名字",
          desc: `生活在深山小镇的女高中生三叶，梦见自己变成了一个男孩，来到陌生的房间里，遇见陌生的友人，眼前则是一片东京街景。而生活在东京的男高中生泷，也梦见自己变成了女高中生来到深山小镇里。不久，他们意识到自己在彼此的梦中交换了灵魂——素未相识的两人就此邂逅，命运的齿轮也开始转动。`,
        },
        {
          img: "./images/index-jd-1.jpg",
          title: "天气之子",
          desc: `高一那年的夏天，帆高离家出走，出岛来到东京。
                            东京连日降雨不断，在熙熙攘攘的大都市一角，帆高遇到了拥有不可思议能力的少女阳菜。
                            “从现在开始会放晴。”
                            只要祈祷，她就能让天空放晴。
                            在气候调节失控的时代，被命运捉弄的少年和少女选择了自己的生活方式。`,
        },
        {
          img: "./images/index-jd-1.jpg",
          title: "铃芽之旅",
          desc: `17岁的少女铃芽，与姨母一同生活在九州的一座平静的港口小镇上。在某日的上学途中，铃芽和一位美男子擦肩而过，他的目的是“寻找门”，于是铃芽追着他来到了山里的废墟。不过，留在那片废墟之中的是一扇孤零零伫立着的老旧白色之门，而铃芽仿佛被什么吸引了一样，向那扇门伸出了手。联系过去、现在与未来，铃芽的闭门故事就此开启。`,
        },
        {
          img: "./images/index-jd-1.jpg",
          title: "秒速五厘米",
          desc: `               动画以一个少年为故事轴心而展开连续3个独立故事的动画短篇，时代背景是从1990年代至现代的日本，通过少年的人生展现东京以及其他地区的变迁。第一话《樱花抄》描述贵树与明里年幼时恋爱的心情，以及他们重逢的一天，第二话《宇航员》描述以对进入高中就读的贵树怀有好感的澄田花苗的视角来展现贵树与明里分别后的生活，第三话《秒速5厘米》则刻画了贵树和明里长大后内心的种种彷徨。
                            《秒速五厘米》，最动人心魄的，最使人念念不忘的，并不是它用的手法多么与众不同，并不是它的爱情多么催人泪下，而是它的美——它将每个人都可能经历的仓皇、迷茫，忍耐和难以忍耐，想放弃又不甘放弃，不敢言说的爱、自行消化的痛，等待的焦灼，大城市的孤独，小地方的思念，渐行渐远和同床异梦，用诗一般的画面表达出来了。它讲述现实，但那是一个抒情的现实。`,
        },
        {
          img: "./images/index-jd-1.jpg",
          title: "追逐繁星的孩子",
          desc: `故事环绕著女主角明日菜的冒险展开。主人公明日菜自从父亲死后，当护士的妈妈也因为工作繁忙而很少回家，明日菜便一直过著孤独寂寞的生活。有一天，透过从她爸爸留给她的水晶收音机遗物中，突然传出了不可思议的音乐，这首不可思议的音乐同时改变了她的日常生活。明日菜决定追寻著这把来自远方的声音而展开了新的冒险之旅，只为了再与一个生活在异国的男孩再相遇而来到了地下世界雅戈泰，最后明日菜终于明白，自己之所以开始这场冒险只是因为自己太寂寞了，影片结尾明日菜回到陆地上，开始了平淡的生活。`,
        },
        {
          img: "./images/index-jd-1.jpg",
          title: "云之彼端,约定的地方",
          desc: `影片的故事背景设定在以现实世界为基础所衍生的架空世界，叙述日本在津轻海峡另一侧的北海道（虾夷）遭到苏联占领，南方与美国结盟，日本国形成南北两侧对立的局势。
                            在北方有一座高耸入云的圆塔是北方的军事设施。这座塔一直是初三学生「浩纪」与「拓也」的憧憬，他们在军工厂打工，利用那里的零件和赚来的钱制作飞机，希望有朝一日可以飞到云的那边去看看那座塔。他们的同班同学「佐由理」在因缘牵绊下遇见了浩纪与拓也两人，并对于他们要在暑假搭乘维席拉到神秘巨塔的计画非常的寄予厚望，也和浩纪许下了一起搭飞机去到云的那端的约定，那个暑假他们过得非常充实和开心。
                            然而「泽渡佐由理」突然下落不明，受到打击的他们制作飞机的计划就此搁浅。几年后联邦国与美国之间的军事冲突即将一触即发，神秘巨塔的秘密也日渐趋于明朗化。另一方面，佐由理的行踪也因神秘巨塔的解密而曝光。佐由理是从中学三年级的夏天开始的三年内，因不明原因所引发的疾病而持续睡眠，并在发病的那年夏天即转往东京的医院住院观察。在这三年「浩纪」屡屡在梦中寻找到「佐由理」到过的痕迹。
                            在得知神秘巨塔与佐由理有著重大关系的冲击秘密后，浩纪与拓也两人便再次完成中学当年所无法实现的梦想，希望能唤醒「佐由理」。「浩纪」载着佐由理飞往那云之彼端、约定的地方．．．．．．`,
        },
        {
          img: "./images/index-jd-1.jpg",
          title: "言叶之庭",
          desc: `年方15岁的高中生秋月孝雄，专心学业的过程中不得不为了生计打工赚钱。母亲离家出走，他与哥哥过着看不到前方的生活。入梅之日，孝雄逃课来到日本庭园。在一座安静的小亭子里，27岁的职场女性雪野百香里边吃巧克力边饮啤酒的样子引起了孝雄的注意。似曾相识的二人，仿佛约定好了一般，每到落雨之日便从世俗的烦恼中逃脱出来，相会于这座钢筋铁骨都市丛林中宛若世外桃源的幽静角落。在梅雨季节的日子里，他们的心渐渐向彼此靠拢。志愿成为手工鞋匠的秋月，决心以雪野为模特做一双鞋。
                            　　雨过天晴，艳阳高照，庭园中久久不见秋月和雪野的身影，相会无期亦有期……
`,
        },
      ]

      localStorage.setItem('sub2Data', JSON.stringify(sub2Data));
    }
    localStorage.setItem('sub2Data', JSON.stringify(sub2Data));
  </script>

</body>

</html>